import { Button, Empty, message, Select, Space, TableColumnsType, Tag, Tooltip, Typography } from 'antd'
import { NavigateFunction } from 'react-router-dom'
import { PurchaseArrivalTrackingVOV2 as ITableData } from './types'
import { Image } from 'antd'
import { getImageByUrl } from '@/utils/getImageByUrl'
import { CheckOutlined, CloseOutlined, CopyOutlined, EditOutlined, FileSearchOutlined } from '@ant-design/icons'
import { ITableDataArriavl } from '@/pages/Purchase/Order/types'
export const useIndexColumns = ({
  navigate,
  tableData,
  settableData,
  UserOptions,
  setUserOptions,
  handleSearchUser,
  onSaveUser,
  onEditDeliveryTime,
  onViewArrived,
  EditTrackOrderPerson,
  isRoot,
}: {
  navigate: NavigateFunction
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  UserOptions: IOptionItem[]
  setUserOptions: React.Dispatch<React.SetStateAction<IOptionItem[]>>
  handleSearchUser: (newValue: string) => void
  onSaveUser: (info: ITableData, isFlush: boolean) => void
  onEditDeliveryTime: (info: ITableData) => void
  onViewArrived: (info: ITableData) => void
  EditTrackOrderPerson: boolean
  isRoot: boolean
}): TableColumnsType<ITableData> => [
  {
    title: '采购订单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    fixed: 'left',
    width: 230,
    render: (info, rows) => {
      return (
        <>
          <Typography.Link onClick={() => navigate('/purchase/order/detail?id=' + rows?.purchaseOrderId)}>
            {info + '(' + rows.purchaseOrderStatusName + ')'}
          </Typography.Link>
          <Typography.Text
            style={{ marginLeft: 4 }}
            copyable={{
              onCopy: async () => {
                try {
                  await navigator.clipboard.writeText(info)
                } catch (error) {
                  console.error('复制失败:浏览器不支持 navigator.clipboard.writeText方法', error)
                }
              },
            }}
          ></Typography.Text>

          {rows.exceptionStage ? <Tag color="warning">{rows.exceptionStage}</Tag> : null}
        </>
      )
    },
  },
  {
    title: '大类',
    dataIndex: 'firstClassConfigName',
    key: 'firstClassConfigName',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '跟单',
    dataIndex: 'trackOrderPerson',
    key: 'trackOrderPerson',
    align: 'center',
    width: 160,
    render: (info, rows) => {
      return (
        <div>
          {!rows?.isEdit ? (
            <div>
              <span>{rows.trackOrderPerson || '-'}</span>
              {rows?.purchaseOrderStatus != 3 &&
                EditTrackOrderPerson &&
                rows?.purchaseOrderStatus != 4 &&
                rows?.purchaseOrderStatus != 5 && (
                  <Tooltip placement="top" title="编辑">
                    <EditOutlined
                      style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                      onClick={() => {
                        rows.isEdit = true
                        if (rows.trackOrderPerson && rows.trackOrderPersonWorkId) {
                          setUserOptions([{ label: rows.trackOrderPerson, value: rows.trackOrderPersonWorkId }])
                        }
                        settableData([...tableData])
                      }}
                    />
                  </Tooltip>
                )}
            </div>
          ) : (
            <Space.Compact size="small">
              <Select
                value={rows.trackOrderPersonWorkId || null}
                placeholder="请选择"
                style={{ width: 90 }}
                options={UserOptions}
                popupMatchSelectWidth={false}
                showSearch
                allowClear
                onClear={() => {
                  rows.trackOrderPerson = null
                  rows.trackOrderPersonWorkId = null
                  settableData([...tableData])
                }}
                optionFilterProp="label"
                filterOption={false}
                onSearch={handleSearchUser}
                onChange={(_, items: any) => {
                  rows.trackOrderPersonWorkId = items?.workId || null
                  rows.trackOrderPerson = items?.name || null
                  settableData([...tableData])
                }}
                notFoundContent={<Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
              ></Select>
              <Button
                type="primary"
                icon={<CheckOutlined />}
                onClick={() => {
                  onSaveUser(rows, true)
                }}
              ></Button>
              <Button
                icon={<CloseOutlined />}
                onClick={() => {
                  rows.isEdit = false
                  settableData([...tableData])
                  onSaveUser(rows, false)
                }}
              ></Button>
            </Space.Compact>
          )}
        </div>
      )
    },
  },
  {
    title: '订单类型',
    dataIndex: 'orderType',
    key: 'orderType',
    align: 'center',
    width: 120,
    render: (info) => {
      return info == 0 ? '首单' : info == 1 ? '返单' : '-'
    },
  },
  {
    title: '正式订单时间',
    dataIndex: 'officialOrderTime',
    key: 'officialOrderTime',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 120,
    render: (info, rows) => {
      return info && rows?.spuId ? (
        <Typography.Link
          ellipsis
          onClick={() => {
            window.open('/goods/manage/detail?spuId=' + rows?.spuId)
          }}
          style={{ paddingLeft: 12, paddingRight: 12 }}
        >
          {info}
        </Typography.Link>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '助记码',
    dataIndex: 'memoryCode',
    key: 'memoryCode',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },

  {
    title: '款式图',
    dataIndex: 'mainPicFileId',
    key: 'mainPicFileId',
    align: 'center',
    width: 120,
    render: (info) => {
      return (
        <Image rootClassName="table_image" width={40} height={40} src={info} fallback={getImageByUrl('moren.png')} />
      )
    },
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
    align: 'center',
    width: 120,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="top" title={info}>
          <div
            style={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              paddingLeft: 4,
              paddingRight: 4,
            }}
          >
            {info || '-'}
          </div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center',
    width: 180,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="top" title={info}>
          <div
            style={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              paddingLeft: 4,
              paddingRight: 4,
            }}
          >
            {info || '-'}
          </div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: 'QC',
    dataIndex: 'qualityInspector',
    key: 'qualityInspector',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '设计师/买手',
    dataIndex: 'designerName',
    key: 'designerName',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '采购方式',
    dataIndex: 'purchaseTypeName',
    key: 'purchaseTypeName',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '要求到货日期',
    dataIndex: 'requiredArrivalTime',
    key: 'requiredArrivalTime',
    align: 'center',
    width: 180,
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
          <div>{info || '-'}</div>
          {rows?.arrivalTimeTips ? <div style={{ color: 'red' }}>({rows?.arrivalTimeTips})</div> : ''}
        </div>
      )
    },
  },
  {
    title: '供应链交期',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 150,
    render: (info, rows) => {
      if ([0, 1, 2].includes(rows.purchaseOrderStatus!) && rows?.contractStatus != 5 && isRoot) {
        return (
          <div>
            <Typography.Link>{info || '-'}</Typography.Link>
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEditDeliveryTime(rows)}
              />
            </Tooltip>
          </div>
        )
      } else {
        return <Typography.Text>{info || '-'}</Typography.Text>
      }
    },
  },
  {
    title: '修正后供应链交期',
    dataIndex: 'updateDeliveryTime',
    key: 'updateDeliveryTime',
    align: 'center',
    width: 140,
    render: (info) => info || '-',
  },
  {
    title: '面料是否集约',
    dataIndex: 'intensiveStatus',
    key: 'intensiveStatus',
    width: 120,
    align: 'center',
    render: (info) => (info == 0 ? '非集约' : info == 1 ? '集约' : '-'),
  },
  {
    title: '面料供应商',
    dataIndex: 'fabricSuppliers',
    key: 'fabricSuppliers',
    align: 'center',
    fixed: 'left',
    width: 180,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="top" title={info}>
          <div
            style={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              paddingLeft: 4,
              paddingRight: 4,
            }}
          >
            {info || '-'}
          </div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '下单数量',
    dataIndex: 'orderQty',
    key: 'orderQty',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '累积成品数',
    dataIndex: 'totalProductQty',
    key: 'totalProductQty',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '已预约发货数量',
    dataIndex: 'scheduledQty',
    key: 'scheduledQty',
    align: 'center',
    width: 130,
    render: (info) => info || '-',
  },
  {
    title: '在途数量',
    dataIndex: 'onTheWayQty',
    key: 'onTheWayQty',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '到货数量',
    dataIndex: 'deliveryQty',
    key: 'deliveryQty',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '到货率',
    dataIndex: 'deliveryPercentStr',
    key: 'deliveryPercentStr',
    align: 'center',
    width: 120,
    render: (info) => info || '-',
  },
  {
    title: '最早到货时间',
    dataIndex: 'firstArrivalTime',
    key: 'firstArrivalTime',
    align: 'center',
    width: 140,
    render: (info, rows) => {
      return (
        <div
          style={{ color: info ? 'var(--primary-color)' : '', cursor: info ? 'pointer' : '' }}
          onClick={() => {
            if (info) {
              onViewArrived(rows)
            }
          }}
        >
          <span>{info || '-'}</span>
          {info && <FileSearchOutlined style={{ marginLeft: 3, color: 'var(--primary-color)' }} />}
        </div>
      )
    },
  },
]

export const useArrivalColumns = (): TableColumnsType<ITableDataArriavl> => [
  {
    title: '预约发货单',
    dataIndex: 'reserveInvoiceCode',
    key: 'reserveInvoiceCode',
    align: 'center',
    width: 160,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '到货时间',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 160,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'reserveInvoiceDetailVOList',
    key: 'reserveInvoiceDetailVOList',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.productSimpleVO?.skuCode}>
              {item?.productSimpleVO?.skuCode || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
  {
    title: '预约发货数量',
    dataIndex: 'scheduleQty',
    key: 'scheduleQty',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.scheduleQty}>
              {item?.scheduleQty || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
  {
    title: '到货数量',
    dataIndex: 'arriveQty',
    key: 'arriveQty',
    align: 'center',
    width: 160,
    render: (_, rows) => {
      if (rows.reserveInvoiceDetailVOList && rows.reserveInvoiceDetailVOList.length > 0) {
        return rows?.reserveInvoiceDetailVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.arriveQty}>
              {item?.arriveQty || '-'}
            </div>
          )
        })
      } else {
        return '-'
      }
    },
  },
]
